<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>添加/卸载插件</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../../res/layui/css/layui.css" rel="stylesheet">
  <link href="../../res/adminui/dist/css/admin.css" rel="stylesheet">
  <script src="../../res/jquery-3.6.0.min.js"></script>
  <script src="../../res/layui/layui.js"></script> 
  <script src="../../res/socket.io.js"></script> 

  <style>
    /* 自定义样式  */
    .layui-table-plugincss .layui-table-header,
    .layui-table-plugincss thead tr{background-color: #F8FCF9; color: #16BAAA}
    .layui-form-plugincss > div{margin-bottom: 6px;}
  </style>

</head>
<body class="layui-padding-3">
	
	<div class="layui-panel layui-border-green" style="width: 80%; margin: 10px auto;">
	  <div style="padding: 16px;">
		将插件放置到plugins目录下，会自动扫描并加载到本页<br>
		如果您是自己开发的插件，则到“开发者中心”先注册才会显示在这里，因为这里也会显示其它已注册的第三方插件<br><br>
		<button type="button" class="layui-btn layui-btn-fluid" id="opendir" style="width: 300px;">打开插件目录</button>
	  </div>
	</div>	
	
  <div style="padding: 16px;"> 
    <table class="layui-hide" id="ID-table-plug-css" lay-filter="ID-plugins"></table>
  </div>
  <script type="text/html" id="ID-table-plug-css-user">
    <ul>
      <li>{{= d.PlugName }} </li>
    </ul>
 </script>
  <script type="text/html" id="ID-table-plug-css-tool">
    <div class="layui-form layui-form-plugincss">
    </div>
  </script>

<script>
layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
	
  table.render({
    elem: '#ID-table-plug-css',
    method: 'POST',
    url: '/user_plugins', // 后端接口
    contentType: 'application/json',
    where: { action: 'setup_plugins_list' }, // 请求参数
    page: true,
    height: 'full-35',
	lineStyle: 'height: 80px;', // 定义表格的多行样式
      css: [ // 直接给当前表格主容器重置 css 样式
        '.layui-table-page{text-align: center;}' // 让分页栏居中
      ].join(''),
      className: 'layui-table-plugincss', // 用于给表格主容器追加 css 类名

    cols: [[
      {field: 'PlugName', width: 160, title: '插件名称', templet: '#ID-table-plug-css-user'},
      {field: 'PlugDir', minWidth: 20, title: '所在目录'},
      {field: 'Ver', minWidth: 10, title: '版本'},
      {field: 'PlugDes', minWidth: 50, title: '插件说明'},
      {width: 300, title: '操作', templet: function(d) {
          return d.Installed ?
            `<button type="button" class="layui-btn layui-bg-red" lay-event="unplugins">已经安装，我要卸载</button>` :
            `<button type="button" class="layui-btn layui-btn-normal" lay-event="setup-plugin">未安装，我要安装</button>`;
        }
      }
    ]]
  });

  table.on('tool(ID-plugins)', function(obj){
    var data = obj.data;
    var layEvent = obj.event;

    if (layEvent === 'setup-plugin') {
      // 安装插件
		var setupUrl = `/views/plugins/setup_plugin.html?dir=${encodeURIComponent(data.PlugDir)}&src=sps`;
		window.location.href = setupUrl;
    } else if (layEvent === 'unplugins') {
      // 卸载插件
      layer.confirm('是否要卸载插件？（删除数据+临时文件）', {icon: 3, title:'提示'}, function(index){
        // 用户确认卸载后的操作
        $.ajax({
          type: "POST",
          url: "/user_plugins", // 与后端通信的URL
          contentType: "application/json",
          data: JSON.stringify({
            action: "unplugins",
            PlugDir: data.PlugDir // 传递插件目录
          }),
          success: function(response){
            if(response.code === 0){
              layer.msg('卸载成功');
              table.reload('ID-table-plug-css'); // 重新加载表格
            } else {
              layer.msg('卸载失败: ' + response.msg);
            }
          },
          error: function(){
            layer.msg('请求失败，请检查网络和服务器配置');
          }
        });
        layer.close(index); // 关闭confirm窗口
      });
    }
  });
	
	$('#opendir').off('click').on('click', function(){
	$.ajax({
		type: "POST",
		url: "/user_plugins",  // 同一个后端路由处理不同的action
		contentType: "application/json",
		data: JSON.stringify({action: "open_plugins_dir"}),
		success: function(response) {
			console.log(response.message);
		},
		error: function(xhr, status, error) {
			console.error("Error opening directory: " + status + ", " + error);
		}

	 });
	});
	
});

</script>

</body>
</html>
